{% extends 'myhome/index.html'%}
{% block title %}
<title>地址管理</title>
{% endblock %}

{% block css %}
<link href="/static/myhome/css/personal.css" rel="stylesheet" type="text/css">
<link href="/static/myhome/css/addstyle.css" rel="stylesheet" type="text/css">
{% endblock %}

{% block js %}
<script src="/static/myhome/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
{% endblock %}


{% block con %}
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-address ">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
						</div>
						<hr/>

						<li class="user-addresslist " style="display: none;">
								<span class="new-option-r"><i class="am-icon-check-circle"></i>默认地址</span>
								<p class="new-tit new-p-re">
									<span class="new-txt buy-user">小叮当</span>
									<span class="new-txt-rd2 buy-phone">159****1622</span>
								</p>
								<div class="new-mu_l2a new-p-re">
									<p class="new-mu_l2cw">
										<span class="title">地址：</span>
										<span class="province">湖北</span>省
										<span class="city">武汉</span>市
										<span class="dist">洪山</span>区
										<span class="street">雄楚大道666号(中南财经政法大学)</span></p>
								</div>
								<div class="new-addr-btn">
									<a href="#"><i class="am-icon-edit"></i>编辑</a>
									<span class="new-addr-bar">|</span>
									<a href="javascript:void(0);" onclick="delClick(this);"><i class="am-icon-trash"></i>删除</a>
								</div>
							</li>
						<ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails AddressAll">

							
						</ul>

						<div class="clear"></div>
						<a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
						<!--例子-->
						<div class="am-modal am-modal-no-btn" id="doc-modal-1">

							<div class="add-dress">

								<!--标题 -->
								<div class="am-cf am-padding">
									<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
								</div>
								<hr/>

								        <div class="am-u-md-12">
            <form class="am-form am-form-horizontal">
                <div class="am-form-group">
                    <label for="user-name" class="am-form-label">
                        收货人
                    </label>
                    <div class="am-form-content">
                        <input type="text" id="user-name" placeholder="收货人">
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-phone" class="am-form-label">
                        手机号码
                    </label>
                    <div class="am-form-content">
                        <input id="user-phone" placeholder="手机号必填" type="email">
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-phone" class="am-form-label">
                        所在地
                    </label>
                    <div class="am-form-content address">
                        <select name="sheng">
                            {% for v in citys %}
                                <option value="{{ v.id }}">{{ v.name }}</option>
                            {% endfor %}
                        </select>

                        <select name="shi">
                            <option>--请选择--</option>
                        </select>
                        <select name="xian">
                            <option>--请选择--</option>
                        </select>
                       
                        
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-intro" class="am-form-label">
                        详细地址
                    </label>
                    <div class="am-form-content">
                        <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                        <small>
                            100字以内写出你的详细地址...
                        </small>
                    </div>
                </div>
                <div class="am-form-group theme-poptit">
                    <div class="am-u-sm-9 am-u-sm-push-3">
                        <div class="am-btn am-btn-danger" id="addressadd">
                            保存
                        </div>
                        <div class="am-btn am-btn-danger close" id="addressclose">
                            取消
                        </div>
                    </div>
                </div>
            </form>
        </div>

							</div>

						</div>

					</div>

					<script type="text/javascript">
						$(document).ready(function() {							
							$(".new-option-r").click(function() {
								$(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
							});
							
							var $ww = $(window).width();
							if($ww>640) {
								$("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
							}
							
						})
					</script>

					<div class="clear"></div>

				</div>

			</div>

			<aside class="menu">
				<ul>
					<li class="person">
						<a href="index.html">个人中心</a>
					</li>
					<li class="person">
						<a href="{% url 'myhome_myinfo_information' %}">个人资料</a>
						<ul>
							<li> <a href="{% url 'myhome_myinfo_information' %}">个人信息</a></li>
							<li> <a href="safety.html">安全设置</a></li>
							<li class="active"> <a href="{% url 'myhome_myinfo_address' %}">收货地址</a></li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的交易</a>
						<ul>
							<li><a href="{% url 'myhome_myinfo_order' %}">订单管理</a></li>
							<li> <a href="change.html">退款售后</a></li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的资产</a>
						<ul>
							<li> <a href="coupon.html">优惠券 </a></li>
							<li> <a href="bonus.html">红包</a></li>
							<li> <a href="bill.html">账单明细</a></li>
						</ul>
					</li>

					<li class="person">
						<a href="#">我的小窝</a>
						<ul>
							<li> <a href="collection.html">收藏</a></li>
							<li> <a href="foot.html">足迹</a></li>
							<li> <a href="comment.html">评价</a></li>
							<li> <a href="news.html">消息</a></li>
						</ul>
					</li>

				</ul>

			</aside>
		</div>
		<script type="text/javascript">
			// 获取当前用户的所有收货地址
        getUserAllAddress()
        function getUserAllAddress(){
            // 清空之前的数据
            $('.AddressAll').empty()
            // 发送ajax请求获取数据
            $.get('{% url 'myhome_addresslist' %}',function(data){
                // console.log(data)
                if(data.error == 0){
                    // 有数据
                    var arr = data.data
                    // 循环数据
                    for (var i = 0; i < arr.length; i++) {
                        var li = $('.user-address li').eq(0).clone()
                        // 判断当前是否为默认
                        if(arr[i].isChecked){
                            li.addClass('defaultAddr')
                            

                        }
                        li.attr('addrid',arr[i].id)
                        li.find('.buy-user').text(arr[i].shr)
                        li.find('.buy-phone').text(arr[i].shdh)
                        li.find('.province').text(arr[i].sheng)
                        li.find('.city').text(arr[i].shi)
                        li.find('.dist').text(arr[i].xian)
                        li.find('.street').text(arr[i].info)
                        li.find('.addressid').text(arr[i].id)
                        // 让元素显示
                        li.show()
                        // 创建li加入到ul中
                        $('.AddressAll').append(li)
                    }
                }else{
                    // 没有数据

                }
            },'json')
        }

        // 地址选择  单击事件
        $('.AddressAll').on('click','li',function(){
            // 添加class defaultAddr
            $(this).addClass('defaultAddr').siblings().removeClass('defaultAddr')

        })


        // 获取页面中的 下拉选框 绑定change事件
        $('.address select').click(function(){
            // 获取当前选中的元素的 id
            var id = $(this).val()

            // 发送ajax请求,获取下一级的数据
            $.get('{% url "myhome_getcitys" %}',{'id':id},function(data){
                // 判断返回的数据,如果为空,
                if(data.length == 0){ return }

                // 判断级别
                if(data[0].level == 2){
                    var sel = $('.address select[name=shi]')
                }else if(data[0].level == 3){
                    var sel = $('.address select[name=xian]')
                }

                var ops = ''
                // 遍历获取的结果,拼接成option选项
                for (var i = 0; i < data.length; i++) {
                    ops += '<option value="'+data[i]['id']+'">'+data[i].name+'</option>'
                }
                // 把拼接好的选项加入到下拉框中
                sel.html(ops)

            },'json')
        })

		</script>

{% endblock %}
